<!--  -->
<template>
  <div>
    <ItemMusicTop :playlist="state.playlist" />
    <ItemMusicList :itemlist="state.itemlist" :subscribedCount="state.playlist.subscribedCount" />



  </div>
</template>

<script>
import { useRoute } from 'vue-router'
import { onMounted, reactive } from 'vue'
import { getMusicItemList, getItemList } from '@/request/api/item.js'
import ItemMusicTop from '@/components/item/ItemMusicTop.vue'
import ItemMusicList from '@/components/item/ItemMusicList.vue'



export default {
  setup() {
    const state = reactive({  //响应式对象

      playlist: {},//歌单详情页数据
      itemlist: [] //歌单歌曲
    });

    onMounted(async () => {

      let id = useRoute().query.id
      // console.log(id);
      //获取歌单详情
      let res = await getMusicItemList(id);
      console.log(res);
      state.playlist = res.data.playlist;

      //获取歌单所有歌曲 
      let result = await getItemList(id);
      // console.log(result);
      state.itemlist = result.data.songs
      // console.log(state.itemlist);
      //防止页面刷新，数据丢失，将数据保存到sessionStorage
      sessionStorage.setItem('itemDetail', JSON.stringify(state));
    });

    return {
      state
    }

  },
  components: {
    ItemMusicTop,
    ItemMusicList,
  }
}
</script>

<style  scoped>
</style>
